<ul id="mysidebar" class="nav">

  <li class="sidebar-title">Get started</li>

    <ul class="sidebar-items">
      <li><a href="/get-started/install/">1: Install</a></li>
      <li><a href="/get-started/editor/">2: Configure editor</a></li>
      <li><a href="/get-started/test-drive/">3: Test drive</a></li>
      <li><a href="/get-started/codelab/">4: Write your first app</a></li>
      <li><a href="/get-started/learn-more/">5: Learn more</a></li>
    </ul>

  <li class="sidebar-title">Build UIs</li>

    <ul class="sidebar-items">
      <li><a href="/widgets-intro/">Tour the framework</a></li>
      <li><a href="/widgets/">Widget catalog</a></li>
      <li><a href="/cookbook/">Cookbook</a></li>
      <li><a href="/catalog/samples/">Sample catalog</a></li>
      <li><a href="https://codelabs.developers.google.com/codelabs/flutter/index.html#0">Building beautiful UIs - Codelab</a></li>
      <li><a href="/tutorials/layout/">Build layouts - Tutorial</a></li>
      <li><a href="/tutorials/interactive/">Add interactivity - Tutorial</a></li>
      <li><a href="/web-analogs/">Flutter for Web devs</a></li>
      <li><a href="/flutter-for-android/">Flutter for Android devs</a></li>
      <li><a href="/flutter-for-react-native/">Flutter for React Native devs</a></li>
      <li><a href="/gestures/">Gestures</a></li>
      <li><a href="/animations/">Animations</a></li>
      <li><a href="/layout/">Box constraints</a></li>
      <li><a href="/assets-and-images/">Assets and images</a></li>
      <li><a href="/text-input/">Text input</a></li>
      <li><a href="/tutorials/internationalization">Internationalization</a></li>
    </ul>

  <li class="sidebar-title">Use device and SDK APIs</li>

    <ul class="sidebar-items">
      <li><a href="/using-packages/">Using packages</a></li>
      <li><a href="/developing-packages/">Developing packages</a></li>
      <li><a href="/platform-channels/">Platform-specific code</a></li>
      <li><a href="/networking/">Network and HTTP</a></li>
      <li><a href="/json/">JSON and serialization</a></li>
      {% comment %}
      <!-- Temporarily removed because the codelab is broken and possibly
           about to be replaced by a completely new one. -->
      <li><a href="https://codelabs.developers.google.com/codelabs/flutter-firebase/index.html#0">Firebase for Flutter - Codelab</a></li>
      {% endcomment %}
    </ul>

  <li class="sidebar-title">Development and tools</li>

    <ul class="sidebar-items">
      <li><a href="/using-ide/">Using Flutter IDEs</a></li>
      <li><a href="/hot-reload/">Using hot reload</a></li>
      <li><a href="/testing/">Test your app</a></li>
      <li><a href="/debugging/">Debug your app</a></li>
      <li><a href="/ui-performance/">Performance Profiling</a></li>
      <li><a href="/inspector/">Inspect your UI</a></li>
      <li><a href="/android-release/">Build and release for Android</a></li>
      <li><a href="/ios-release/">Build and release for iOS</a></li>
      <li><a href="/upgrading/">Upgrade your Flutter install</a></li>
      <li><a href="/formatting/">Format your source code</a></li>
    </ul>

  <li class="sidebar-title">More details</li>

    <ul class="sidebar-items">
      <li><a href="/faq/">FAQ</a></li>
      <li><a href="/technical-overview">Technical overview</a></li>
      <li><a href="https://docs.google.com/presentation/d/1B3p0kP6NV_XMOimRV09Ms75ymIjU5gr6GGIX74Om_DE/edit?usp=sharing">Magic of Flutter slides</a></li>
      <li><a href="https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit?usp=sharing">Architecture diagrams</a></li>
      <li><a href="https://www.youtube.com/watch?v=dkyY9WCGMi0">Framework's layered design <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
      <li><a href="https://www.youtube.com/watch?v=UUfXWzp0-DU">Flutter's rendering pipeline <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
    </ul>

</ul>
